<template>
    <el-popover placement="bottom-end" popper-class="group-more" trigger="click" width="320">
        <div class="group-grid">
            <div class="group-grid-row">
                <div class="item-grid" @click="onClickEditBtn">
                    <i class="item-icon el-icon-edit" />
                    <div>编辑稿件</div>
                </div>
                <div class="item-grid">
                    <i class="item-icon el-icon-chat-line-square" />
                    <div>评论管理</div>
                </div>
                <div class="item-grid">
                    <i class="item-icon el-icon-link" />
                    <div>分享稿件</div>
                </div>
                <div class="item-grid">
                    <i class="item-icon el-icon-document" />
                    <div>功能待定</div>
                </div>
            </div>
            <div class="group-grid-row">
                <div class="item-grid">
                    <i class="item-icon el-icon-folder-add" />
                    <div>功能待定</div>
                </div>
            </div>
        </div>
        <div @click="onClickDeleteBtn" class="item-btn-delete">
            <i class="el-icon-delete-solid" /> 删除合辑
        </div>
        <el-button class="el-icon-more" size="mini" slot="reference" style="margin-left:20px" />
    </el-popover>
</template>

<script>
import { audioArchiveDestroyerAPI } from "@/api/km_archive_audio";

export default {
    props: {
        archive: {
            type: Object,
            required: true,
        },
    },
    methods: {
        onClickEditBtn() {
            this.$router.push({
                name: "archiveAudioEditor",
                query: {
                    aid: this.archive.aid,
                },
            });
        },
        onClickDeleteBtn() {
            audioArchiveDestroyerAPI(this.archive.aid)
                .then((res) => {
                    // 依赖archiveAudioCard组件
                    this.$parent.$emit("delete");
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss">
.group-more {
    padding: 0;

    .group-grid {
        overflow: hidden;
    }

    .group-grid-row {
        border-bottom: 1px solid #e5e9ef;
        display: flex;
    }
    .item-btn-delete {
        text-align: center;
        height: 48px;
        line-height: 48px;
        color: #99a2aa;
        cursor: pointer;
        &:hover {
            background-color: #f1f3f7;
        }
    }
    .item-grid {
        width: 25%;
        padding-bottom: 10px;
        text-align: center;
        font-size: 12px;
        color: #99a2aa;
        cursor: pointer;
        .item-icon {
            padding: 20px 0 10px;
            font-size: 18px;
            color: #37c8f7;
        }
        &:hover {
            background-color: #f1f3f7;
        }
    }
}
</style>
